<template>
  <div class="product-detail">
    <!-- 商品详情展示区域 -->
    <h2>商品详情页</h2>
    <div v-if="product">
      <h3>{{ product.name }}</h3>
      <img :src="product.image" alt="商品图片" style="width:200px;" />
      <p>价格：￥{{ product.price }}</p>
      <p>描述：{{ product.description }}</p>
      <button @click="addToCart">加入购物车</button>
    </div>
    <div v-else>
      <p>加载中...</p>
    </div>
  </div>
</template>

<script setup>
// 商品详情页，展示单个商品的详细信息
// 通过路由参数 id 获取商品信息
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useCartStore } from '../stores/cart'

const route = useRoute() // 获取当前路由对象
const router = useRouter() // 获取路由实例
const product = ref(null) // 商品信息
const cartStore = useCartStore() // 购物车状态

// 模拟商品数据（实际开发中应从后端接口获取）
const mockProducts = [
  { id: 1, name: '商品A', price: 99, image: 'https://via.placeholder.com/200', description: '这是商品A的描述' },
  { id: 2, name: '商品B', price: 199, image: 'https://via.placeholder.com/200', description: '这是商品B的描述' }
]

// 根据路由参数 id 查找商品
onMounted(() => {
  const id = Number(route.params.id)
  product.value = mockProducts.find(item => item.id === id)
})

// 加入购物车方法
function addToCart() {
  if (product.value) {
    cartStore.addToCart(product.value)
    alert('已加入购物车！')
    // 跳转到购物车页
    router.push('/cart')
  }
}
</script>

<style scoped>
.product-detail {
  padding: 20px;
}
</style> 